<template>
  <div class="tags">
    <div class="container">
      <h2>
        tags 管理
        <el-button type="primary" @click="open()">添加</el-button>
      </h2>
      <div class="tablew">
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="_id" label="标签id"></el-table-column>
          <el-table-column prop="name" label="标签名称"></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="text" size="small" @click="open(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tags",
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getList();

    // this.$api.groupByTags().then((res)=>{
    //     console.log(res);
    // })
  },
  methods: {
    async open(row) {
      try {
        let inputValue = "";
        if(row){
            inputValue = row.name || "";
        }
        let prom = await this.$prompt("请输入标签名称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputValue: inputValue
        });
        let value = prom.value;
        if (!value.trim()) {
          this.$message.warning("标签名字不能是空");
          return;
        }
        console.log(value);
        //创建 或者 修改
        if(row){
          await this.$api.tagUpdate({ name: value,id:row._id });
        }else{
          await this.$api.tagCreate({ name: value });
        }
        
        this.getList();
      } catch (e) {
        console.log(e);
      }
    },
    async getList() {
      try {
        let res = await this.$api.tagList();
        this.list = res;
      } catch (e) {
        console.log(e);
      }
    },
    async remove(row) {
      try {
        console.log(row);
        let res = await this.$api.tagRemove({ id: row._id });
        console.log(res);
        this.getList();
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>
<style lang="scss" scoped src="./Tag.scss"></style>